<template>
	<Nav :navList="navList"></Nav>
	<div class="table">
		<div class="toolbar">
			<a-button type="primary" size="small" @click="funAdd()">
				<template #icon>
					<PlusOutlined />
				</template>
				添加
			</a-button>
			&nbsp;
			<a-button type="primary" size="small" @click="funSearch()">
				<template #icon>
					<SearchOutlined />
				</template>
				搜索
			</a-button>
			<span style="padding-left: 10px">
				<TooBarSearch></TooBarSearch>
			</span>
		</div>
		<a-table :dataSource="dataSource" :columns="columns" :pagination="false" :scroll="{ x: 'max-content' }" :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)">
			<template #bodyCell="{ column, record }">
				<template v-if="column.dataIndex === 'action'">
					<a-button size="small" type="link" @click="funEdit(record)" style="color: #2d8cf0">编辑</a-button>
					<a-divider type="vertical" />
					<a-button size="small" type="link" @click="funDel(record)" danger>删除</a-button>
					<a-divider type="vertical" />
					<a-button size="small" v-for="ac in action" :key="ac.name" type="link" style="color: #2d8cf0" @click="fatherEvent(ac.funName, record)" :danger="ac.type">{{ ac.name }}</a-button>
				</template>
			</template>
		</a-table>
		<a-pagination :showSizeChanger="true" :showQuickJumper="true" :total="PageTotal" :pageSize="pageSize" :current="page" @change="fun_page_onChange" @showSizeChange="onShowSizeChange" style="text-align: center; margin-top: 20px" />
	</div>

	<TableEdit :columns="Config.columns" :visible="editVisible" :editUrl="Config.editUrl" :getUrl="Config.getUrl" ref="child"> </TableEdit>
	<TableAdd :columns="Config.columns" :visible="addVisible" :addUrl="Config.addUrl"></TableAdd>
	<TableSearch :columns="Config.columns" :visible="searchVisible" :columns_search="Config.columns_search"></TableSearch>
</template>

<script>
import Nav from '@/components/Table/Nav.vue';
import TableEdit from '@/components/Table/Edit.vue';
import TableAdd from '@/components/Table/Add.vue';
import TableSearch from '@/components/Table/Search.vue';
import TooBarSearch from '@/components/Table/TooBarSearch.vue';

export default {
	components: {
		Nav,
		TableEdit,
		TableAdd,
		TableSearch,
		TooBarSearch,
	},
	props: {
		Config: {
			type: Object,
			defalut: {},
		},
	},
	data() {
		return {
			dataSource: [],
			PageTotal: 0,
			page: this.Config.page,
			pageSize: this.Config.pageSize,
			formData: {},

			columns: [],
			navList: this.Config.navList == undefined ? [] : this.Config.navList,

			editVisible: false,
			addVisible: false,
			searchVisible: false,
			addUrl: this.Config.addUrl,
			editUrl: this.Config.editUrl,
			getUrl: this.Config.getUrl,
			action: this.Config.action,

			keyName: '',
			filters: [],
		};
	},
	mounted() {
		this.getKeyName(); //这个必须放在第一行
		this.hashListener();
		this.GetData();

		this.columns = [];
		this.Config.columns.forEach((elem, index) => {
			if (!elem.hidden) {
				this.columns.push(elem);
			}
		});
	},
	methods: {
		/**
		 * @function 获取自增主键ID名称
		 */
		getKeyName() {
			this.Config.columns.forEach((elem, index) => {
				if (elem.iskey) {
					this.keyName = elem.dataIndex;
				}
			});
		},
		/**
		 * @function 监听url的hash变化 #后面的参数
		 */
		hashListener() {
			var that = this;
			window.addEventListener(
				'hashchange',
				() => {
					that.GetData();
				},
				false
			);
		},
		/**
		 * @function 加载列表数据,post请求
		 */
		GetData() {
			var that = this;
			this.filters = [];
			var hash = location.hash.substring(1);
			if (hash.length > 1) {
				that.filters = JSON.parse(decodeURI(hash));
			}
			that.$http.post(this.Config.getPageUrl, { Filters: that.filters, pageSize: that.pageSize, PageIndex: that.page }, that, function (ret) {
				that.dataSource = ret.Data;
				that.PageTotal = ret.DataCount;
			});
		},
		/**
		 * @function 页面变化事件
		 * @param {*} pageIndex 页码
		 * @param {*} pageSize  分页数量
		 */
		fun_page_onChange(pageIndex, pageSize) {
			this.page = pageIndex;
			this.pageSize = pageSize;
			this.GetData();
			console.log('page=' + pageIndex + ',pageSize=' + pageSize);
		},
		/**
		 * @function 每页显示数量变化事件
		 * @param {*} current  当前页面
		 * @param {*} pageSize 分页数量
		 */
		onShowSizeChange(current, pageSize) {
			this.page = 1;
			this.pageSize = pageSize;
		},
		/**
		 * @function 搜索按钮事件
		 */
		funSearch() {
			this.searchVisible = true;
		},
		/**
		 * @function 添加事件
		 */
		funAdd() {
			this.addVisible = true;
		},
		/**
		 * @function 编辑事件
		 * @param {*} record  当前行对象obj
		 */
		funEdit(record) {
			this.formData = record;
			this.$refs.child.fun_getData(record[this.keyName]);
			this.editVisible = true;
		},
		/**
		 * @function 删除
		 * @param {*} record  当前行对象obj
		 */
		funDel(record) {
			var that = this;
			var id = record[this.keyName];

			that.$Modal.confirm({
				title: '确认要删除此数据吗? id=' + id,
				okText: '确认',
				cancelText: '取消',
				onOk: () => {
					that.$http.post(this.Config.delUrl, { id: id }, that, function (ret) {
						that.GetData();
						that.$Message['success']('删除成功');
					});
				},
				onCancel: () => {},
			});
		},
		/**
		 * @function 暴漏给子组件调用的方法
		 * @param {*} flag true/false标记
		 * @param {*} isRefresh 是否重新刷新当前列表
		 * @param {*} strName 类型
		 */
		fatherRefresh(flag, isRefresh, strName) {
			if (isRefresh) {
				this.GetData();
			}
			if (strName == 'add') {
				this.addVisible = flag;
			}
			if (strName == 'edit') {
				this.editVisible = flag;
			}
			if (strName == 'search') {
				this.searchVisible = flag;
			}
		},
		/**
		 * @function 自定义按钮
		 * @param {*} funName
		 * @param {*} record
		 */
		fatherEvent(funName, record) {
			this.$parent[funName](record);
		},
	},
};
</script>

<style>
.table {
	border-top: 1px solid #f0f0f0;
	border-right: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	border-left: 1px solid #f0f0f0;
	padding-bottom: 10px;
}
.table .toolbar {
	padding: 10px;
}
.button {
	margin-left: -10px;
}
.ant-table-tbody > tr > td {
	padding: 3px 6px;
	height: 40px;
}
/* 行间距 */
.ant-table-thead > tr > th {
	padding: 6px;
	color: #333;
}
/* 斑马背景色 */
.table-striped {
	/*background: #fafafa;*/
	background: #f3f6fa;
}
/* 鼠标经过背景色 */
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
	background-color: #e6f0ff !important;
}
.ant-table-body .ant-table-row-hover {
	background: #e6f0ff !important;
}
.ant-table-body .ant-table-row-hover > td {
	background: #e6f0ff !important;
}
.ant-table-fixed .ant-table-row-hover {
	background: #e6f0ff !important;
}
.ant-table-fixed .ant-table-row-hover > td {
	background: #e6f0ff !important;
}
</style>
